<template>
    <div style="background: #FFF3EE;">
        <div class="zx_message" @click.stop="abc" style="height:2.5rem;" v-if="stockoutCaption && !confirmOrderFood">
            <!-- <div style="text-align: left;padding:0 0 0 0.5rem;display:inline-block;width:91%;"><span style="color:rgb(239, 84, 35);">所购商品缺货</span>，{{titles}}</div>
            <div style="display:inline-block;">
                <i class="icon njfont nj-jiantou" :class="{jiantou1: isshow}" style="color:#EF5423;opacity:0.6;">&#xe61d;</i>
            </div> -->
            <div class="cor_text" v-if="orderStatus!=='integral' && !confirmOrderFood" style="text-align: left;padding:0rem 0.5rem 0rem 0.5rem;display:inline-block;width:100%;height:100%;line-height:2.5rem;" >
                <span style="color:rgb(239, 84, 35);">所购商品若缺货</span>，则其他商品继续配送(缺货商品退款)
            </div>
            <!-- <div v-if="confirmOrderFood && snackStockoutCaption" style="text-align: left;padding:0rem 0.5rem 0rem 0.5rem;display:inline-block;width:100%;height:100%;line-height:2.5rem;" >
                <span style="color:rgb(239, 84, 35);">所购商品若缺货</span>，则其他商品继续下单(缺货商品退款)
            </div> -->
            <div class="cor_text" v-if="orderStatus==='integral' && !confirmOrderFood" style="text-align: left;padding:0rem 0.5rem 0rem 0.5rem;display:inline-block;width: 100%;height:100%;line-height:2.5rem;font-size: 0.6rem;" >
                <span style="color:rgb(239, 84, 35);">所兑换商品若缺货</span>，则其有货商品继续配送（缺货部分退积分）
            </div>
            
        </div> 
        <div class="zx_message" @click.stop="abc" style="height:2.5rem;" v-if="snackStockoutCaption && confirmOrderFood">
            <!-- <div style="text-align: left;padding:0 0 0 0.5rem;display:inline-block;width:91%;"><span style="color:rgb(239, 84, 35);">所购商品缺货</span>，{{titles}}</div>
            <div style="display:inline-block;">
                <i class="icon njfont nj-jiantou" :class="{jiantou1: isshow}" style="color:#EF5423;opacity:0.6;">&#xe61d;</i>
            </div> -->
            <div class="cor_text" v-if="confirmOrderFood && snackStockoutCaption" style="text-align: left;padding:0rem 0.5rem 0rem 0.5rem;display:inline-block;width:100%;height:100%;line-height:2.5rem;" >
                <span style="color:rgb(239, 84, 35);">所点菜品若缺货</span>，则其他菜品继续制作（缺货菜品退款）
            </div>
        </div> 
        <!-- <transition name="slide-fade"> -->
            <div v-show="msg">
                <!-- <li class="aui-list-item" style="background: white;display:flex;padding-left: 0.8rem;line-height:2.5rem;border-top: 1px solid #eaeaea;">
                    <div class="aui-list-item-inner green-style"  style="border-bottom: 1px solid #eaeaea;width:100%;display:flex;">
                        <label class="aui-pull-left" style="display: flex;align-items: center; margin-right: 0.5rem;"  @click.stop="isChoose">
                        <input class="aui-checkbox" type="checkbox" name="demo1" :checked="isChecked">&nbsp;
                        
                        </label>
                        <div class="aui-pull-right text_c_gray" style="color:black;">其他商品继续配送(缺货商品退款)</div>
                    </div>
                </li> -->
                <!-- <li class="aui-list-item" style="background: white;display:flex; padding-left: 0.8rem;border-bottom: 1px solid #eaeaea;line-height:2.5rem;">
                    <div class="aui-list-item-inner green-style" style="width:100%;display:flex;">
                        <label class="aui-pull-left" style="display: flex;align-items: center;margin-right: 0.5rem;"  @click.stop="ElecBill">
                        <input class="aui-checkbox" type="checkbox" name="demo1" :checked="CheckedElect">&nbsp;
                        
                        </label>
                        <div class="aui-pull-right text_c_gray" style="color:black;">有缺货直接取消订单</div>
                    </div>
                </li> -->
            </div>
        <!-- </transition> -->
        <!-- <goods-Processing :msg="msg"></goods-Processing> -->
    </div>
</template>
<script>
    import { mapMutations, mapGetters } from 'vuex';
	// import {MessageBox} from '../../../ui-components';
	// import goodsProcessing from "../goodsProcessing";
	import axios from "axios";
	// import { Toast } from "../../../utils/toast";
	// import {showLoading, hideLoading} from "../../../utils/loading";

    export default {
        data(){
            return{
                msg:false,
                isChecked:true,
                CheckedElect:"",
                isshow:"",
                titles:'',
                stockoutCaption:"",
                confirmOrderFood:null,
                snackStockoutCaption:'',
            }
        },
        props: {
			sendOrder: {
				type: Function,
				default: () => {}
			},
			orderStatus: {
				type: String,
				default: ''
			},
		},
		computed: {
		    
		},
		components: {
			// "goods-Processing": goodsProcessing,
        },
        methods: {
            ...mapMutations('zwy',[
				'setInvoiceFlag',
			]),
            abc(){
               if(this.msg){
                   this.msg = false;
                   this.isshow = false;
               }else{
                   this.msg = true;
                   this.isshow = true;
               }
               console.log(this.msg,"奇迹而")
            },
            isChoose(){
                console.log("dianjilegouxuan1",this.isChecked)
                if(this.isChecked){
                    this.isChecked = false;
                    this.CheckedElect = true;
                    
                }
                else if(this.CheckedElect){
                    this.isChecked = true;
                    this.CheckedElect = false;
                    this.titles = '其他商品继续配送(缺货商品退款)';
                }
            },
            ElecBill(){
                console.log("dianjilegouxuan2",this.isChecked)
          		if(this.isChecked){
                    this.isChecked = false;
                    this.CheckedElect = true;
                    this.titles = '有缺货直接取消订单';
                    
                }
          		else if(this.CheckedElect){
                    this.isChecked = true;
                    this.CheckedElect = false;
                    
                }
            },
            setFontsize(){
                let heights = window.innerHeight;
                if(heights < 667){
                    let cor_text = document.querySelector(".cor_text")
                    cor_text.style.fontSize = "0.6rem";
                }else{
                    cor_text.style.fontSize = "0.7rem";
                }
            },
            getLackMark(){

                var sessionId = localStorage.getItem('sessionId');
                var config = {
                   url : window.api.base_host+'/baseConfig/findByCode',
                //    data:JSON.stringify(datas),
                   method:"GET",
                   headers: {'sessionId': sessionId, 'Content-Type':'application/json', 'Accept' : 'application/json'},
                }
                axios(config).then((res) => {
                      console.log(this.confirmOrderFood,"调试一波看看————————————————————————————————————————*****", res)
                    //   console.log("调试一波看看1111111111111————————————————————————————————————————*****", this.confirmOrderFood)
                      try{
                        if(res.data.returnCode === 1){
                            this.stockoutCaption = res.data.data[0].stockoutCaption;
                            this.snackStockoutCaption = res.data.data[0].snackStockoutCaption;
                            this.setInvoiceFlag(res.data.data[0].invoiceFlag)
                            if(this.confirmOrderFood){//如果是堂食订单则保存snackStockoutCaption
                                let snackStockoutCaption = res.data.data[0].snackStockoutCaption;
                                this.$store.dispatch('hzh/PutAShopLackFood', snackStockoutCaption);
                            }else{//如果是线上订单则保存stockoutCaption
                                this.$store.dispatch('hzh/PutAShopLack', this.stockoutCaption);
                            }
                        }else {
                            
                        }

                      }catch(err){

                      }
                   
                })
            },
        },
        created(){
            this.getLackMark();
            this.titles = '其他商品继续配送(缺货商品退款)';
            this.confirmOrderFood = this.$router.history.current.query.confirmOrderFood;
            console.log("confirmOrderFood",this.confirmOrderFood)
            
        },
        mounted(){

        },
        updated(){
            let heights = window.innerHeight;
            let widths = window.innerWidth;
            if(heights < 667 && this.stockoutCaption && this.orderStatus !='integral'){
                document.querySelector(".cor_text").style.fontSize = "0.6rem";
//              document.querySelector(".cor_text").style.lineHeight = "1.2rem";
            }
            if( widths < 320 && this.stockoutCaption && this.orderStatus !='integral'){
                document.querySelector(".cor_text").style.fontSize = "0.6rem";
                document.querySelector(".cor_text").style.lineHeight = "1.2rem";
            }
            if(heights < 667 && this.stockoutCaption && this.orderStatus=='integral' && widths >= 320 ){
//              document.querySelector(".cor_text").style.fontSize = "0.6rem";
                document.querySelector(".cor_text").style.lineHeight = "1.2rem";
            }
            if(this.stockoutCaption && this.orderStatus=='integral' && widths < 320 ){
//              document.querySelector(".cor_text").style.fontSize = "0.6rem";
                document.querySelector(".cor_text").style.lineHeight = "1.2rem";
            }
//          else{
//              document.querySelector(".cor_text").style.fontSize = "0.7rem";
//          }
            // console.log("////////////////////////////////////////////////////////////////",heights,document.querySelector(".cor_text"))
        },
        beforeDestroy() {
            // document.querySelector(".home-container").style.transform = "translateX(0px)"
        }
    }



</script>
<style>
    .jiantou1{
        display: block;
        opacity:0.6;
        transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* Internet Explorer */
    -moz-transform:rotate(180deg); /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg); /* Opera */
    }
    .slide-fade-enter-active {
        transition: all 1s;
    }
    .slide-fade-leave-active {
        transition: all 1s;
    }
    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
        opacity: 0;
        transform: translateY(5rem);
    }
</style>
